<template>
  <div class="bigData-container">
    <el-amap
      class="amap-box"
      :zoom="zoom"
      :center="center"
      :events="events"
      :plugin="plugin"
      :scrollWheel="false"
    >
      <!-- :mapStyle="mapStyle" -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :events="marker.events"
        :content="marker.content"
        :offset="marker.offset"
      ></el-amap-marker>
    </el-amap>
    <div class="bigData">
      <header class="header">头部</header>
      <div class="content">
        <div class="left-box">左侧盒子</div>
        <div class="right-box">右侧盒子</div>
      </div>
      <footer class="footer">
        底部
        <div class="addZoom" @click="addZoom">+</div>
        <div class="reductionZoom" @click="reductionZoom">-</div>
        <div class="number"></div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: "BigData",
  data() {
    return {
      zoom: 14,
      center: [121.489912, 31.244415],
      // mapStyle: "amap://styles/dark",
      markers: [
        {
          position: [121.489912, 31.244415],
          content:
            '<div style="width: 10px; height: 10px; background: #FFD700; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 215, 0, 0.8); border: 2px solid rgba(255, 215, 0, 0.5)"></div>',
          offset: [-7, -7],
          events: {
            click: () => {
              console.log("marker clicked");
            },
          },
        },
        {
          position: [121.491693, 31.243553],
          content:
            '<div style="width: 10px; height: 10px; background: #00a0e9; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 160, 233, 0.8); border: 2px solid rgba(0, 160, 233, 0.5)"></div>',
          offset: [-7, -7],
          events: {
            click: () => {
              console.log("marker clicked");
            },
          },
        },
        {
          position: [121.490071, 31.242944],
          content:
            '<div style="width: 10px; height: 10px; background: #FF822F; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 130, 47, 0.8); border: 2px solid rgba(255, 130, 47, 0.5)"></div>',
          offset: [-7, -7],
          events: {
            click: () => {
              console.log("marker clicked");
            },
          },
        },
      ],
      events: {
        init: (map) => {
          console.log("map init", map);
          // map.setDefaultCursor("default");
          // map.setMapType(1);
          // map.setFeatures(["bg", "road", "building"]);
        },
        click: (e) => {
          console.log("map clicked", e);
        },
      },
      plugin: [
        // {
        //   pName: "ToolBar",
        //   position: "RB",
        // },
        {
          pName: "Scale",
          position: "LB",
        },

        {
          pName: "MapType",
          position: "RT",
          defaultType: 1,
        },
      ],
    };
  },
  components: {},
  created() {
    this.onload();
  },
  mounted() {
    const that = this;
    that.onResize();
    window.onresize = function () {
      that.onResize();
    };
  },
  methods: {
    onload() {
      // 初始化加载
    },
    onResize() {
      const targetWidth = 1920;
      const targetHeight = 1080;
      const currentWidth = document.documentElement.clientWidth;
      const currentHeight = document.documentElement.clientHeight;

      const scaleX = currentWidth / targetWidth;
      const scaleY = currentHeight / targetHeight;

      // 设置 CSS 变量
      document.documentElement.style.setProperty("--scale-x", scaleX);
      document.documentElement.style.setProperty("--scale-y", scaleY);

      const bigDataEl = document.querySelector(".bigData");
      if (bigDataEl) {
        bigDataEl.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
        bigDataEl.style.transformOrigin = "top left";
      }
    },
    addZoom() {
      if (this.zoom < 18) {
        this.zoom++;
      }
    },
    reductionZoom() {
      if (this.zoom > 9) {
        this.zoom--;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bigData-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  position: relative;

  .amap-box {
    width: 1920px !important; // 固定宽度
    height: 1080px !important; // 固定高度
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: top left;
    transform: scale(var(--scale-x), var(--scale-y));
  }
}

.bigData {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: top left;
  background-color: transparent;
  z-index: 2;
  pointer-events: none;

  .header {
    width: 100%;
    height: 118px;
    background-color: rgba(255, 0, 0, 0.8);
    pointer-events: auto;
  }

  .content {
    width: 100%;
    height: calc(100% - 118px - 63px);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .left-box {
    width: 523px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    pointer-events: auto;
  }

  .right-box {
    width: 523px;
    height: 100%;
    background-color: rgba(0, 255, 255, 0.8);
    pointer-events: auto;
  }

  .footer {
    width: 100%;
    height: 63px;
    background-color: rgba(51, 51, 51, 0.8);
    position: absolute;
    bottom: 0;
    pointer-events: auto;
    .addZoom {
      position: absolute;
      top: -50px;
      right: 537px;
      cursor: pointer;
      text-align: center;
      width: 40px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background: #293440;
      border-radius: 20px 20px 20px 20px;
      border-image: radial-gradient(
          circle,
          rgba(46, 100, 145, 1),
          rgba(27, 144, 227, 1)
        )
        2 2;
    }
    .reductionZoom {
      position: absolute;
      top: -50px;
      right: 597px;
      cursor: pointer;
      text-align: center;
      width: 40px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background: #293440;
      border-radius: 20px 20px 20px 20px;
      border-image: radial-gradient(
          circle,
          rgba(46, 100, 145, 1),
          rgba(27, 144, 227, 1)
        )
        2 2;
    }
    .number {
      position: absolute;
      top: -139px;
      left: 537px;
      width: 102px;
      height: 118px;
      background-color: #fff;
    }
  }
  .radius-yellow {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ff0;
  }
}
</style>
<style>
.amap-maptypecontrol {
  display: none !important;
}
/* .amap-controls {
  display: none !important;
} */
.amap-copyright {
  display: none !important;
}
.amap-logo {
  display: none !important;
}
</style>
